<template>
  <div class="content">
    <div class="content_top">
      <div>
        <div style="color: #00bcd4">{{ title }}</div>
        <div>标题</div>
      </div>
      <div>
        <div>16</div>
        <div>应提交部门数</div>
      </div>
      <div>
        <div>{{ count }}</div>
        <div>提交部门</div>
      </div>
      <div>
        <div>{{ standard }}</div>
        <div>合格率</div>
      </div>
    </div>
    <div class="content_bottom">
      <div class="title">
        <div style="font-weight: 600">完成情况表</div>
        <div>
          <el-button size="small" type="primary" @click="jiafenbiaoAll"
            >审核</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table
          :data="accomplishData"
          style="width: 100%"
          height="250"
          :header-cell-style="{ background: '#F8FAFB', color: '#000' }"
        >
          <el-table-column
            prop="shool"
            label="部门"
            :filters="academic"
            :filter-method="filterAca"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="提交人"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="完成情况"
            align="center"
            :filters="[
              { text: '已完成', value: '1' },
              { text: '未完成', value: '0' },
            ]"
            :filter-method="filterTag"
          >
            <template slot-scope="scope">
              {{ scope.row.type == 1 ? "已完成" : "未完成" }}
            </template>
          </el-table-column>
          <el-table-column prop="ziping" label="基础分" sortable align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 1">--</span>
              <span v-else>{{ scope.row.sum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sum" label="最终得分" sortable align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 1">--</span>
              <span v-else :style="scope.row.sum < 60 ? 'color:red' : ''">{{
                scope.row.sum
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学院完成指标审核" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="audit(scope.row)"
                :disabled="scope.row.type != 1"
                >审核</el-button
              ></template
            >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="jiafenbiao(scope.row)"
                :disabled="scope.row.type != 1"
                >加分表</el-button
              >
              <el-button
                size="mini"
                :disabled="scope.row.type != 1"
                @click="addScope(scope.row)"
                >加分</el-button
              >
              <el-button
                size="mini"
                :disabled="scope.row.type != 1"
                @click="decScope(scope.row)"
                >减分</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 审核弹窗 -->
    <div class="audit">
      <el-dialog
        :title="'审核：' + xueyuan"
        :visible.sync="dialogVisible3"
        width="30%"
        :before-close="handleClose3"
      >
        <div class="audit_table">
          <el-table :data="auditData" border style="width: 100%">
            <el-table-column
              type="index"
              label="题号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="textarea" label="评分标准">
            </el-table-column>
            <el-table-column label="支撑材料">
              <el-table-column label="是否有材料" width="92" align="center">
                <template slot-scope="scope">
                  <div>
                    <!-- 注意：此处有报错index.vue:634 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'image')" 由于程序设计不是说有对象都有image键值对，因此报错，但并不影响使用。期望后续有更好的解决方法！-->
                    <div
                      v-if="
                        scope.row.annex &&
                        if_data &&
                        getData[scope.$index].hasOwnProperty('image') &&
                        scope.row.checked == 1
                      "
                    >
                      <img
                        v-if="getData[scope.$index].image.length > 0"
                        style="height: 15px"
                        :src="
                          baseURL +
                          'img/2024/06/25/2b3158608d12f1b581dd5597e058b712.png'
                        "
                        alt=""
                      />
                      <img
                        style="height: 15px"
                        v-else
                        :src="
                          baseURL +
                          'img/2024/06/25/9d65125d11ea84cd4b8ca63398891438.png'
                        "
                        alt=""
                      />
                    </div>
                    <div v-else-if="!scope.row.annex"></div>
                    <img
                      style="height: 15px"
                      v-else
                      :src="
                        baseURL +
                        'img/2024/06/25/9d65125d11ea84cd4b8ca63398891438.png'
                      "
                      alt=""
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="材料内容"
                ><template slot-scope="scope">
                  <div
                    v-if="
                      scope.row.annex &&
                      if_data &&
                      getData[scope.$index].hasOwnProperty('image') &&
                      scope.row.checked
                    "
                  >
                    <div
                      v-if="getData[scope.$index].image.length > 0"
                      style="display: flex; flex-wrap: wrap"
                    >
                      <el-image
                        v-for="(img, num) in getData[scope.$index].image"
                        :key="num"
                        style="display: block; height: 50px; width: 50px"
                        :src="imgURL(img)"
                        :preview-src-list="getData[scope.$index].image"
                      >
                      </el-image>
                    </div>
                  </div>
                  <div
                    v-if="scope.row.annex && !if_data"
                    style="text-align: center"
                  >
                    --
                  </div>
                </template></el-table-column
              >
            </el-table-column>
            <el-table-column
              prop="fen"
              label="自评得分"
              align="center"
              width="170"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.fen"
                  :min="0"
                  label="描述文字"
                  size="small"
                ></el-input-number
              ></template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogVisible3 = false), leaderAudit(auditData)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 加减分对话框 -->
    <div class="add_dec">
      <el-dialog
        :title="isAdd ? '加分' : '减分'"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose2"
      >
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="分数" prop="scope">
            <el-input v-model="form.scope"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="input">
            <el-input v-model="form.input" type="textarea"></el-input>
          </el-form-item>
          <el-divider content-position="center" v-if="!isAdd"
            >红线指标</el-divider
          >
          <el-form-item label="红线指标" v-if="!isAdd">
            <el-checkbox-group v-model="form.question">
              <el-checkbox
                v-for="(item, index) in redIndex"
                :key="index"
                :label="item.id"
                name="type"
                >{{ item.text }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updataScope('form', form)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 分数审核对话框 -->
    <div class="shenhe">
      <el-dialog title="全部提交表" :visible.sync="dialogVisible4">
        <el-table
          :data="gridData"
          height="100%"
          border
          highlight-current-row
          @row-dblclick="dbhang"
        >
          <el-table-column
            type="index"
            label="题号"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            property="xueyuan"
            label="学院"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            property="title"
            label="标题"
            align="center"
          ></el-table-column>
          <el-table-column
            property="status"
            label="进度"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未审核</span>
              <span v-if="scope.row.status == 1">已取消</span>
              <span v-if="scope.row.status == 2">已通过</span>
              <span v-if="scope.row.status == 3">未通过</span>
            </template>
          </el-table-column>
          <el-table-column
            property="apply_score"
            label="申请加分"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            property="picture"
            label="支撑材料"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.picture.length == 0">--</span>
              <span v-else>有</span>
            </template></el-table-column
          >
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="pass(scope.row)"
                type="success"
                :disabled="scope.row.status != 0"
                >通过</el-button
              >
              <el-button
                size="small"
                @click="NoPass(scope.row)"
                type="danger"
                :disabled="scope.row.status != 0"
                >拒绝</el-button
              >
            </template></el-table-column
          >
        </el-table>
      </el-dialog>
    </div>

    <!-- 审核显示详情 -->
    <div class="shenheXiangxi">
      <el-dialog :title="bumen" :visible.sync="dialogVisible5">
        <tbody>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>标题
            </td>
            <td>
              <div>{{ academicXiangqing.title }}</div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>发布者
            </td>
            <td>
              <div>--</div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span v-if="academicXiangqing.status == 0"></span
              ><span
                v-if="academicXiangqing.status == 2"
                style="color: #1aad19"
              ></span
              ><span
                v-if="academicXiangqing.status == 3"
                style="color: #f76260"
              ></span
              >结果
            </td>
            <td>
              <div v-if="academicXiangqing.status == 0" style="color: #409eff">
                待审核
              </div>
              <div v-if="academicXiangqing.status == 1">已取消</div>
              <div v-if="academicXiangqing.status == 2" style="color: #1aad19">
                已通过
              </div>
              <div v-if="academicXiangqing.status == 3" style="color: #f76260">
                未通过
              </div>
            </td>
          </tr>
          <tr v-if="academicXiangqing.status == 3">
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>原因
            </td>
            <td>
              <div style="color: #f76260">{{ academicXiangqing.remark }}</div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>申请分数
            </td>
            <td>
              <div>{{ academicXiangqing.apply_score }}</div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>申请时间
            </td>
            <td>
              <div>{{ academicXiangqing.create_time }}</div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>申请内容
            </td>
            <td>
              <div>
                {{ academicXiangqing.content }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="
                width: 90px;
                color: #9e9e9e;
                display: flex;
                align-items: center;
              "
            >
              <span></span>支撑材料
            </td>
            <td>
              <div>
                <el-image
                  v-for="(item, index) in academicXiangqing.picture"
                  :key="index"
                  style="width: 100px; height: 100px"
                  :src="imgURL(item)"
                  :preview-src-list="academicXiangqing.picture"
                >
                </el-image>
              </div>
            </td>
          </tr>
        </tbody>
      </el-dialog>
    </div>

    <!-- 不通过理由表单 -->
    <el-dialog
      title="修改意见"
      :visible.sync="dialogVisible6"
      :before-close="handleClose4"
    >
      <el-form :model="liyou" :rules="liyou_rules" ref="liyou">
        <el-form-item label="原因" prop="remark">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="告知二级部门修改意见"
            v-model="liyou.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('liyou')">取 消</el-button>
        <el-button type="danger" @click="submitForm(liyou, 'liyou')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addjianfen, addjiafen, alljiafen } from "@/api/audit";
import { allMetrics } from "@/api/metrics";
import { alluserxinxi } from "@/api/rating";
import { allxueyuan } from "@/api/academic";
import {
  allneirongs,
  leader_change,
  getData,
  ifData,
} from "@/api/leaderChange";
import { getScoreExamineList, examine } from "@/api/shenhe";
import baseURL from "@/config/index";
export default {
  data() {
    return {
      title: "",
      standard: "",
      count: "",
      wjid: "", //问卷id
      accomplishData: "",
      academic: [], //学院
      openid: "", //上传用户的id
      //审核数据
      auditData: [],
      //   审核弹窗
      dialogVisible3: false,
      //当前学院信息
      academicRow: "",
      // 红线指标数据
      redIndex: [],
      isAdd: 1,

      //   提交表单数据
      //加分减分描述
      form: {
        scope: "",
        input: "",
        question: [],
      },

      //   关闭加减分对话框弹窗
      dialogVisible2: false,

      //验证规则
      rules: {
        scope: [
          { required: true, message: "请输入增加/减少的分数", trigger: "blur" },
        ],
        input: [
          {
            required: true,
            message: "请对增加/减少的分数进行描述",
            trigger: "blur",
          },
        ],
      },

      // 当前审核部门
      xueyuan: "",

      // 审核弹窗
      dialogVisible4: false,
      dialogVisible5: false,
      gridData: [],

      // 学院审核详情
      academicXiangqing: {},

      bumen: "",

      // 不通过例有验证表单
      dialogVisible6: false,
      liyou: {
        remark: "",
      },
      liyou_rules: {
        remark: [
          { required: true, message: "请输入修改意见", trigger: "blur" },
        ],
      },
      //基础路径
      baseURL: "",
      // 是否保存
      if_data: 0,
      // 保存数据
      getData: [],
    };
  },

  created() {
    this.baseURL = baseURL;
    this.title = this.$route.params.title;
    this.count = this.$route.params.count;
    this.standard = this.$route.params.standard;
    this.init();
  },

  methods: {
    init() {
      this.wjid = this.$route.params.id;
      let id = {
        wjid: this.wjid,
      };
      //   获取学院完成情况
      alluserxinxi(id).then((res) => {
        // console.log();
        this.accomplishData = res.data;
      });
      // 获取学院
      allxueyuan().then((res) => {
        let academic = [];
        res.data.forEach((element) => {
          let a = {
            text: element.named,
            value: element.named,
          };
          academic.push(a);
        });
        this.academic = academic;
      });
    },

    // 点击审核按钮
    audit(row) {
      this.openid = row.id;
      this.xueyuan = row.shool;
      let date = {
        xueyuan: row.shool,
        id: this.wjid,
      };
      allneirongs(date).then((res) => {
        //问卷各题题目和分数
        this.auditData = res.data.slice(0, -1);
      });
      // 判断是否保存
      ifData({
        wenjuan_id: this.wjid,
        xueyuan: row.shool,
      }).then((res) => {
        if (res.data.if_data != 0) {
          this.if_data = 1;
          // 获取保存数据
          getData({
            wenjuan_id: this.wjid,
            xueyuan: row.shool,
          }).then((res) => {
            this.getData = res.data.data;
          });
        } else {
          this.if_data = 0;
          this.getData = [];
        }
      });

      this.dialogVisible3 = true;
    },

    //获取加分表全部
    jiafenbiaoAll() {
      this.dialogVisible4 = true;
      var data = {
        wjid: this.wjid,
      };
      // 获取该学院加分表
      getScoreExamineList(data).then((res) => {
        this.gridData = res.data;
      });
    },

    //加分表（学院）
    jiafenbiao(row) {
      this.dialogVisible4 = true;
      var data = {
        xueyuan: row.shool,
        wjid: this.wjid,
      };
      // 获取该学院加分表
      getScoreExamineList(data).then((res) => {
        this.gridData = res.data;
      });
    },

    // 审核通过
    pass(row) {
      var data = {
        id: row.id,
        examine: 1,
        reality_score: row.apply_score,
        remark: "",
      };
      examine(data).then((res) => {
        this.$message({
          message: "已通过",
          center: true,
          type: "success",
        });
      });
    },

    // 审核不通过
    NoPass(row) {
      this.dialogVisible6 = true;
      this.liyou.id = row.id;
      this.liyou.examine = 0;
      this.liyou.reality_score = row.apply_score;
    },

    // 关闭不通过审核弹窗
    handleClose4(done) {
      if (this.liyou.remark) {
        this.$confirm("你还未提交信息，确认关闭？")
          .then((_) => {
            done();
            this.$refs["liyou"].resetFields();
          })
          .catch((_) => {});
      } else {
        done();
      }
    },

    // 提交不通过原因
    submitForm(liyou) {
      this.$refs["liyou"].validate((valid) => {
        if (valid) {
          examine(liyou).then((res) => {
            this.$message({
              message: "已拒绝",
              center: true,
              type: "warning",
            });
            this.$refs["liyou"].resetFields();
            this.dialogVisible6 = false;
          });
        } else {
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs["liyou"].resetFields();
      this.dialogVisible6 = false;
    },

    //自评加分
    addScope(row) {
      this.academicRow = row;
      this.isAdd = 1;
      let a = {
        xueyuan: row.shool,
        wjid: this.wjid,
      };
      alljiafen(a).then((res) => {
        let row = {
          scope: res.data.jiafen,
          input: res.data.jiayuan,
        };
        this.form = Object.assign({}, row);
      });
      this.dialogVisible2 = true;
    },

    //自评减分
    decScope(row) {
      this.academicRow = row;
      this.isAdd = 0;
      allMetrics().then((res) => {
        this.redIndex = res.data;
      });
      let a = {
        xueyuan: row.shool,
        wjid: this.wjid,
      };
      alljiafen(a).then((res) => {
        if (res.data.zhibiao == null) {
          let row = {
            scope: res.data.jianfen,
            input: res.data.jianyuan,
            question: [],
          };
          this.form = Object.assign({}, row);
        } else {
          let arr = JSON.parse(res.data.zhibiao);
          let row = {
            scope: res.data.jianfen,
            input: res.data.jianyuan,
            question: arr,
          };
          this.form = Object.assign({}, row);
        }
      });
      this.dialogVisible2 = true;
    },

    //加分/减分提交
    updataScope(form, data) {
      if (this.isAdd == 1) {
        data.wjid = this.wjid;
        data.openid = this.academicRow.id;
        data.xueyuan = this.academicRow.shool;
        delete data.question;
        addjiafen(data).then((res) => {
          if (res.code == 0) {
            this.dialogVisible2 = false;
            this.$refs.form.resetFields();
            let id = {
              wjid: this.wjid,
            };
            alluserxinxi(id).then((res) => {
              this.accomplishData = res.data;
            });
            this.$message({
              type: "success",
              message: "加分成功",
            });
          }
        });
      } else {
        data.wjid = this.wjid;
        data.openid = this.academicRow.id;
        data.xueyuan = this.academicRow.shool;
        if (data.question.length != 0) {
          let type = [];
          for (let i = 0; i < data.question.length; i++) {
            let a = {
              pid: data.question[i],
            };
            type.push(a);
          }
          data.question = type;
        }

        addjianfen(data).then((res) => {
          if (res.code == 0) {
            this.dialogVisible2 = false;
            this.$refs.form.resetFields();
            let id = {
              wjid: this.wjid,
            };
            alluserxinxi(id).then((res) => {
              this.accomplishData = res.data;
            });
            this.$message({
              type: "warning",
              message: "减分成功",
            });
          }
        });
      }
    },

    //领导修改自评分数
    leaderAudit(audit) {
      let auditScope = {
        question: [],
      };
      audit.forEach((item) => {
        let this_self = {
          xueyuan: this.xueyuan,
          fen: item.fen,
          nrid: item.wjid,
        };
        auditScope.question.push(this_self);
      });
      leader_change(auditScope).then((res) => {
        let id = {
          wjid: this.wjid,
        };
        alluserxinxi(id).then((res) => {
          this.accomplishData = res.data;
        });
      });
    },

    // 关闭审核弹窗
    handleClose3(done) {
      done();
    },

    //关闭加减分对话框
    handleClose2(done) {
      if (this.form.scope != "" || this.form.input != "") {
        this.$confirm("你还未提交信息，确认关闭？")
          .then((_) => {
            done();
            this.$refs.form.resetFields();
          })
          .catch((_) => {});
      } else {
        done();
      }
    },

    //筛选完成情况
    filterTag(value, row, column) {
      return row.type == value;
    },

    //筛选班级
    filterAca(value, row) {
      return row.shool == value;
    },

    // 审核表点击行触发
    dbhang(row) {
      this.bumen = row.xueyuan;
      this.academicXiangqing = row;
      this.dialogVisible5 = true;
    },

    // 图片路径修改
    imgURL(url) {
      return this.$baseURL + url;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-width: calc(100vw - 210px);
  height: calc(100vh - 84px);
  padding: 15px;
  background-color: #eff1f3;

  .content_top {
    width: 100%;
    height: 76.08px;
    margin-bottom: 15px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 35px;

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;

      :nth-child(1) {
        color: #4679e3;
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 5px;
      }

      :nth-child(2) {
        color: #bfbfc1;
        font-size: 14px;
      }
    }
  }

  .content_bottom {
    height: calc(100vh - 204.58px);
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 0px 10px 10px 10px;
    overflow: auto;

    .title {
      height: 50px;
      border-bottom: 1px solid #eff1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }

    .table {
      padding: 10px 0px 0px 0px;

      ::v-deep .el-table {
        height: calc(100vh - 274.51px) !important;
      }
    }
  }

  .shenhe {
    ::v-deep .el-dialog {
      margin: 10vh 10vw !important;
      /* margin-bottom: 10vh; */
      height: 80vh;
      width: 80vw;
      min-width: 942px;
      border-radius: 12px;

      .el-dialog__body {
        height: calc(100% - 40px);
        padding: 20px 20px;
      }
    }
  }

  .shenheXiangxi {
    ::v-deep .el-dialog {
      margin: 15vh auto !important;
      /* margin-bottom: 10vh; */
      height: 70vh;
      // width: 80vw;
      // min-width: 942px;
      border-radius: 12px;
      overflow: hidden;

      .el-dialog__body {
        height: calc(100% - 54px);
        padding: 20px 20px;
        overflow: auto;

        tr {
          height: 50px;
          margin-bottom: 10px;

          td {
            vertical-align: top;
          }

          span {
            height: 24px;
            width: 5px;
            border-radius: 5px;
            margin-right: 8px;
            background-color: #409eff;
            display: block;
          }

          div {
            padding-bottom: 10px;
          }
        }
      }
    }
  }

  .audit {
    ::v-deep .el-dialog {
      width: 80% !important;
    }
  }
}
</style>